<template>
	<view class="message-content">
		<u-navbar :is-back="false" :border-bottom="false" title="消息" title-size="32" :title-bold="false">
			<view class="navbar-right" slot="right">
				<text>全部已读</text>
			</view>
		</u-navbar>
		<view class="wrapper">
			<view class="menu-con">
				<u-gap height="14" bg-color="#F4F5F6"  style="z-index: 10000;"></u-gap>
				<view class="menus">
					<view class="item">
						<view class="iconfont iconxitongxiaoxi">
						</view>
						<view class="counts">
							3
						</view>
					</view>

					<view class="item">
						<view class="iconfont icontongzhigonggao">
						</view>
						<view class="counts">
							3
						</view>
					</view>

					<view class="item">
						<view class="iconfont iconxitongxiaoxi">
						</view>
					</view>

					<view class="item">
						<view class="iconfont iconxitongxiaoxi">
						</view>
					</view>

				</view>
				<liuyuno-tabs :tabData="tabs" :activeIndex="activeIndex" :config="tabsDefaultConfig" @tabClick="tabClick($event, '默认设置')" />
			</view>
			<view class="content">
				<discuss-list></discuss-list>
			</view>

		</view>

	</view>
</template>

<script>
	import SysMsgList from "./components/SysMsgList/index.vue"
	import DiscussList from "./components/DiscussList/index.vue"
	export default {
		components: {
			SysMsgList,
			DiscussList
		},
		data() {
			return {
				tabsDefaultConfig: {
					// 要显示的key
					key: 'name',
					// 字体大小 rpx
					fontSize: 26,
					// 字体颜色
					color: '#999999',
					// 激活字体颜色
					activeColor: '#333333',
					// item宽度 0为自动
					itemWidth: 0,
					// 下划线左右边距，文字宽度加边距，如果设置了itemWidth则为itemWidth加边距 rpx
					underLinePadding: 5,
					// 下划线宽度 rpx  注意：设置了此值 underLinePadding 失效
					underLineWidth: 0,
					// 下划线高度 rpx
					underLineHeight: 6,
					// 下划线颜色
					underLineColor: '#EB4D3C',
				},
				tabs: [{
						state: -1,
						name: '系统消息',
					},
					{
						state: 1,
						name: '通知公告'
					},
					{
						state: 2,
						name: '评论'
					},
					{
						state: 3,
						name: '点赞'
					}
				],
				activeIndex: 0
			}
		},
		methods: {
			tabClick() {

			}
		}
	}
</script>

<style lang="scss">
	@import "../../../commom/styles/icons.css";

	page {
		background: #F4F5F9;
	}

	.message-content {
		/deep/.u-title {
			font-weight: 500;
		}

		.navbar-right {
			margin-right: 38rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #777777;
		}

		.wrapper {
			padding: 20rpx;
			padding-top: 0;
			position: relative;
 
			.menu-con {
				left: 20rpx;
				right: 20rpx;
				position: fixed;
				// height: 172rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				z-index: 1;
				// padding: 37rpx;

				padding-bottom: 0;

				.menus {
					display: flex;
					justify-content: space-around;
					padding-top: 37rpx;
					padding-bottom: 8rpx;

					.item {
						position: relative;

						&:nth-child(1) {
							>.iconfont {
								color: #7AC6F9;
							}
						}

						&:nth-child(2) {
							>.iconfont {
								color: #E97A76;
							}
						}

						&:nth-child(3) {
							>.iconfont {
								color: #8680F7;
							}
						}

						&:nth-child(4) {
							>.iconfont {
								color: #E97DA3;
							}
						}



						.iconfont {
							font-size: 82rpx;
						}

						>.counts {
							position: absolute;
							top: -12rpx;
							right: -12rpx;
							width: 36rpx;
							height: 36rpx;
							background: #EB4D3C;
							border: 3rpx solid #FFFFFF;
							font-size: 18rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 30rpx;
							border-radius: 50%;
							text-align: center;
						}
					}

				}
			}
			.content{
				padding-top: 186rpx;
			}
		}

	}
</style>
